// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入组件
import MyHome from '@/components/MyHome.vue'
import MyMovie from '@/components/MyMovie.vue'
import MyAbout from '@/components/MyAbout.vue'
import MyMusic from '@/components/MyMusic.vue'
import AboutMe from '@/components/AboutMe'
import AboutYou from '@/components/AboutYou'
import NotFound from '@/components/NotFound'

// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)


// 1. routes: []   index.js中，定义路由规则的
// 2. $router  就是index.js中导出的那个对象，对象的原型中有 go、push方法 
// 3. $route 用于获取当前的路由信息，比如 $oute.path 表示当前的路由地址；$route.params.xxx ；$route.query.xxx 


// 3. 创建路由的实例对象
const router = new VueRouter({
  // 配置到哪种模式，默认就是hash模式
  mode: 'history', // 配置成历史模式
  // 写路由规则(hash地址--->要展示的组件  对应关系)
  routes: [
    { path: '/', redirect: '/home' }, // 重定向，当访问/的时候，将hash地址转到/home
    // 直接写到最大的数组中的 路由，叫做一级路由
    // 一级路由对应的组件，一定会显示到 App.vue 的占位符 位置
    { name: 'home', path: '/home', component: MyHome },
    { name: 'movie', path: '/movie/:id/:name', component: MyMovie },
    { name: 'about', path: '/about', component: MyAbout },
    { name: 'music', path: '/music', component: MyMusic },
    {
      name: 'about',
      path: '/about',
      // redirect: '/about/you' // 当地址栏hash的/about的时候，转到/about/you
      component: MyAbout,
      children: [
        // children里面的path，就不写/了。最终的hash地址是父子hash地址拼接的结果
        // 也就是说，关于我的地址是/about/me 关于你的地址是/about/you
        // 如果子规则地址以/开头，则最终的地址不会拼接
        { name: 'me', path: '/about/me', component: AboutMe },
        { name: 'you', path: 'you', component: AboutYou }
      ]
    },
    // 针对访问错误，给出404提示
    { path: '*', component: NotFound }
  ]
})

// 4. 导出路由的实例对象
export default router